<template>
	<view class="section section-detail">
		<view class="description-view">
			<view class="tab-header">
				<view class="tab-header-inner">
					<block v-for="(item, index) in product_info_tab" :key="index">
						<view class="tab-item " :class="tabIndex==index?'active':''" @click="tabIndex=index">
							{{item.tab_name}}
						</view>
					</block>

				</view>
			</view>

			<view class="tab-view">
				<view class="tab-item">
					<view class="goods-tpl-data">
						<block v-for="(item, index) in page_info" :key="index">
							<template v-if="item.view_type =='image_w_1080'">
								<view class="section">
									<view class="image_w">
										<image :src="item.body.img_url" mode="widthFix"></image>
									</view>
								</view>
							</template>

						</block>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import LazyLoad from '../LazyLoad/LazyLoad.vue'
	export default {
		name: "product_info_tab",
		components:{LazyLoad},
		props: ['product_info_tab'],
		data() {
			return {
				tabIndex: 0,
			};
		},
		computed: {
			page_info() {
				return this.product_info_tab[this.tabIndex].page_info
			}
		},
	}
</script>

<style lang="scss" scoped>
	.section-detail {
		.description-view {
			position: relative;

			.tab-view {
				background: #fff;

				.tab-item {
					color: #3c3c3c;

					.goods-tpl-data {
						.section {
							.image_w {
								width: 7.2rem;
								height: auto;
								image {
									display: block;
									width: 100%;
								}
							}
						}
					}
				}

			}
		}
	}

	.tab-header {
		height: 0.68rem;
		position: sticky;
		top: 0.8rem;
		width: 100%;
		z-index: 98;
		background: #fff;

		.tab-header-inner {
			height: 0.68rem;
			align-items: center;
			display: flex;

			.tab-item {
				text-align: center;
				display: block;
				font-size: .24rem;
				width: 100%;
				color: #000;

				&:last-child {
					border-right: none;
				}
			}

			.active {
				color: #ff5934;
			}
		}
	}
</style>